{include file="common/header-top" /}

<style>
    .job-item{
        display: block;
        margin-top: 5px;
    }
    .job-item .job-item-img-icon {
        margin-top: 5px;
        padding-left: 10px;
    }

    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .option-btn{
        margin: 2px;
    }

</style>

<div id="app"  v-cloak>


    <van-nav-bar title="审核报名人员" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>

    <!--兼职头部标题-->
    <van-row style="margin-top: 3%;">
        <van-col span="17">
            <van-cell :border="false" class="job-detail-title-cell">
                <span class="van-ellipsis job-detail-title" :title="jobDetail.title">{{jobDetail.title}}</span>
            </van-cell>
            <van-cell  icon="/__FRONT__/images/icon/baozhang.png" :border="false"  class="job-detail-title-cell">
                <van-tag type="success">平台保障</van-tag>
            </van-cell>
            <van-cell :border="false"  class="job-detail-title-cell">
                <span>招聘人数：{{jobDetail.need_worker}}人/{{jobDetail.had_worker}}人</span>
            </van-cell>
        </van-col>

        <van-col span="7" class="job-detail-money-cell">
            <van-tag plain class="job-detail-money">
                <span class="money-font" style="font-size: 22px;color: #fe9e39;">{{jobDetail.salary}}</span>
                <span>{{jobDetail.salary_unitCh}}</span>
                <span style="color: #2a2a2c;font-weight: bold;">{{jobDetail.settlement_typeCh}}</span>
            </van-tag>
        </van-col>
    </van-row>
    <!--兼职头部标题-->


    <van-divider :style="{borderColor: '#32a14a', padding: '0 5px',margin: '0px'}"></van-divider>


    <!--招聘详情-->
    <van-row>
        <van-cell title="兼职详情" icon="/__FRONT__/images/icon/job-detail-icon.png" size="large">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-cell>
            <van-icon name="location">详细地址:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.provinces_name}} {{jobDetail.address}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="clock">工作时间:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.work_timeCh}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="friends">性别要求:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.genderCh}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="friends">招聘人:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.contacts}}({{jobDetail.mobile}})</span>
        </van-cell>
    </van-row>
    <!--招聘详情-->

    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px 0px'}"></van-divider>

    <van-row style="padding-bottom: 70px;">
        <van-cell :title="getApplyTitle" :border="false"></van-cell>

        <van-row v-for="item in jobApplyList" class="job-item">
            <van-col span="5">
                <van-icon :name="item.avatar" class="job-item-img-icon" size="45px"></van-icon>
            </van-col>

            <van-col span="9">
                <div class="van-hairline--left">
                    <van-icon name="/__FRONT__/images/icon/user-setting-name.png" class="job-item-icon" ></van-icon>
                    <span class="job-item-span" >{{item.truename}}</span>
                </div>
                <div class="van-hairline--left">
                    <van-icon name="/__FRONT__/images/icon/xin-icon-2.png" class="job-item-icon" ></van-icon>
                    <span class="job-item-span">信用：{{item.credit_score}}分</span>
                </div>

                <div class="van-hairline--left">
                    <van-icon name="/__FRONT__/images/icon/publish-job-sex.png" class="job-item-icon" ></van-icon>
                    <span class="job-item-span" >{{item.true_sexCh}}/{{item.true_age ? item.true_age : '暂无'}}</span>
                </div>

                <div class="van-hairline--left">
                    <van-icon name="/__FRONT__/images/icon/user-setting-mobile.png" class="job-item-icon" ></van-icon>
                    <span class="job-item-span">{{item.userMobile}}</span>
                </div>
            </van-col>

            <van-col span="10">
                <van-col span="24">
                    <van-tag mark type="primary" style="display: block;float: right;">{{item.statusCh}}</van-tag>
                </van-col>
                <van-col span="24">
                    <div style="display: inline-block; float: right;">
                        <van-button color="#d81d05" @click="notPassUser(item)" size="small" class="option-btn" v-if="showOption(item)">审核不通过</van-button>
                        <van-button color="#32a14a" @click="passUser(item, 2)" size="small" class="option-btn" v-if="showOption(item)">审核通过</van-button>
                    </div>
                </van-col>
            </van-col>
        </van-row>
    </van-row>



    {include file="common/foot-bar" /}



    <!--错误信息弹窗-->
    <van-popup
            v-model="showErrorPop"
            get-container="#app"
            position="center"
            style="width: 100%;"
            round
    >
        <van-row>
            <van-col span="24" style="text-align: center;">
                <span>审核不通过理由?</span>
            </van-col>
            <van-col span="24">
                <van-cell-group>
                    <van-field
                        v-model="errorMsg"
                        rows="5"
                        type="textarea"
                        autosize
                        placeholder="请输入审核不通过的理由"
                    ></van-field>
                </van-cell-group>
            </van-col>
            <van-divider></van-divider>
            <van-col span="24" style="padding-bottom: 10px">
                <van-button
                    type="warning"
                    style="float: left; margin-left: 20px;"
                    size="small"
                    @click="cancelPassNot"
                >取消</van-button>
                <van-button
                    type="primary"
                    style="float: right; margin-right: 20px;"
                    size="small"
                    @click="confirmPassNot"
                >确定</van-button>
            </van-col>
        </van-row>
        </van-cell-group>
    </van-popup>
    <!--错误信息弹窗-->




</div>

<script>


    Vue.use(vant.Lazyload);

    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {
                active: 3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },
                jobDetail:{},
                jobApplyList:[],

                showErrorPop: false,
                errorMsg: '',

                currentCheckItem: {},

            }
        },

        //创建时执行 操作
        created : function (){
            var params = {
                id: '{$jobId}',
                extend: ''
            };
            //获取兼职详情
            axiosRequest.get('/api/job/detail',{params:params}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.jobDetail = response.data;
                } else {
                    vant.Toast({
                        message: response.msg,
                        onClose: function () {
                            history.back();
                        }
                    });
                }
            });
            //获取报名人员的详细列表
            var applyParams = {
                jobId: '{$jobId}',
            };
            axiosRequest.get('/api/job/applyUserList',{params:applyParams}).then(function (response) {
                if (response.code == 200) {
                    if (response.data) {
                        vm.$data.jobApplyList = response.data;
                    }
                } else {
                    vant.Toast({
                        message: response.msg,
                        onClose: function () {
                            history.back();
                        }
                    });
                }
            });
        },

        //挂载完成
        mounted(){
        },

        //计算属性
        computed:{
            getApplyTitle(){
                if (this.jobDetail.had_worker) {
                    return '已有' + this.jobDetail.had_worker + '位同学报名';
                } else {
                    return '暂时还没有人报名哦';
                }
            },
        },

        //方法集合 在 `methods` 对象中定义方法
        methods: {
            //返回上一页
            goBack(){
                history.back();
            },
            //是否显示操作按钮
            showOption(item){
                return (item.status == 1) ? true: false;
            },

            cancelPassNot(){
                this.showErrorPop = false;
            },
            confirmPassNot(){
                this.passUser(this.currentCheckItem, 3);
                this.showErrorPop = false;
            },

            //显示理由框
            notPassUser(item){
                this.showErrorPop = true;
                this.currentCheckItem = item;
            },
            //审核实际操作
            passUser(item, status){
                var postData = {
                    applyId: item.id,
                    jobId: item.job_id,
                    pass: status,
                    message: this.errorMsg
                };
                axiosRequest.post('/api/job/checkUser', postData).then(function (response) {
                    if (response.code == 200) {
                        var applyId = response.data.applyId;
                        vm.$data.jobApplyList.forEach(function (item) {
                            if (item.id == applyId) {
                                item.status = response.data.status;
                                item.statusCh = response.data.statusCh;
                            }
                        });
                        vm.$data.currentCheckItem = {};
                        vant.Toast('审核成功!');
                    } else {
                        vant.Toast('操作失败！');
                    }
                });
            }

        }


    });


</script>


